import {Component} from 'react'
import {Row,Col,Tag,Statistic,Button} from 'antd'
import {ArrowUpOutlined, ArrowDownOutlined, SearchOutlined } from '@ant-design/icons';
import colorUtils from 'utils/colorUtils'
import {inject, observer} from 'mobx-react'
/**
 * 名称：标签推荐
 * 描述：标签推荐（展示已选标签和推荐标签）
 * 调用：活动中心的创建活动、活动中心的活动列表
 * 输入： 
 * 时间：20220402
 */
 @inject('tagStore')
 @observer
class RecommendTag extends Component{

    
    render(){
        const {store,tagStore} = this.props
        const {usedTags,recommendTags,showButton} = store
        const colors=colorUtils.getColors()
        
        return (
            <>
            <Row>
            已选标签：
            {usedTags.map((item,index)=>{
                        return <Tag color={colors[index%colors.length]} key={item.key} >{item.key}:{item.name}</Tag>
                       
                })
        
            }
            </Row>
            {/* <Divider/> */}
            <Row>
                <Col>推荐标签:
                    {showButton === true?
                    <SearchOutlined style={{marginLeft:10}} onClick={()=>{
                    store.apiRecommendTags()}
                    }/>
                    :""
                    }
                </Col>
                
                
                {recommendTags.map((item,index)=>{
                   
                    if ((item.weight > 0 && !usedTags.find(rItem=>rItem.name === item.name)) 
                        || (usedTags.find(rItem=>rItem.name === item.name))){
                        var color = '#3f8600'
                        var buttonLabel = '添加'
                        var buttonClick = key => tagStore.apiAddRecommendTagToUsedTags(key)
                        var array = <ArrowUpOutlined/>
                       
                        if ( usedTags.find(rItem=>rItem.name === item.name)){  
                            buttonLabel = '移除'
                            buttonClick = key => tagStore.setUsedTagByDelete(key)
                            
                        }
                        if (item.weight < 0){
                            color = '#cf1322'
                            array = <ArrowDownOutlined/>
                        }
                        
                        return (
                            <Col span={10} key={"col"+item.key}>
                            <Statistic
                                title={item.name}
                                value={item.weight} 
                                precision={2}
                                valueStyle={{ color: color }}
                                prefix={array}
                                // suffix="%"
                            />
                            {showButton === true?
                            <Button style={{ marginTop: 16 }} type="primary"  
                                onClick={e=>buttonClick(item.key)}>
                                {buttonLabel}
                            </Button>
                            : ""
                             }
                        
                            </Col>
                            )
                    } else {
                        return ""
                    }
                    
                    })

                }
            </Row>
            </>
           )
    }

}
export default RecommendTag